<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const formattedTime = ref('');//存放最终的时间日期
let timer = null;//存放定时器
// 格式化时间函数
const formatTime = () => {
  const dt =  new Date();
  const y =  dt.getFullYear();
  const mt =  dt.getMonth() + 1;
  const day =  dt.getDate();
  const h =  dt.getHours();
  const m =  dt.getMinutes();
  const s =  dt.getSeconds();
  // 补零处理
  const padZero = (num) => num < 10 ? `0${num}` : num;
  formattedTime.value = `当前时间：${y}年${padZero(mt)}月${padZero(day)}日 ${padZero(h)}:${padZero(m)}:${padZero(s)}`;
};
// 启动定时器
const startTimer = () => {
   formatTime(); // 立即执行一次
  timer = setInterval(formatTime, 1000);
};
// 清除定时器
const stopTimer = () => {
   clearInterval(timer);
};
onMounted(() => {
  startTimer();
  console.log("123")
  console.log(formattedTime.value)
});
onUnmounted(() => {
  stopTimer();
});

</script>
<template>
<div class="header">
  <h1>数据可视化-ECharts</h1>
  <div class="showtime">{{ formattedTime }}</div>
</div>

</template>
<style scoped lang="less">
.header{
  position: relative;
  height:100px;
  background:url(../assets/head_bg.png)
  no-repeat;
  background-size: 100% 100%;
  h1{
    font-size: 38px;
    color:#fff;
    text-align: center;
    line-height:80px;
  }
  .showtime{
    position: absolute;
    right:30px;
    top:0;
    line-height: 75px;
    color:rgba(255,255,255,0.7);
    font-size: 20px;
  }
}
</style>